Mit einem HTML-Editor können Sie einfach HTML-Code erstellen und ändern. Doch welcher HTML-Editor ist am besten? Dieser Test stellt die 22 besten WYSIWYG HTML-Editoren mit Live-Vorschau, Quellcode-Editoren ohne Vorschau und Online HTML-Editoren mit ihren Stärken und Schwächen vor und vergleicht sie miteinander.
Der Vergleich umfasst auch vielseitige und leistungsstarke Code-Editoren für Entwickler, die eine Vielzahl von Programmiersprachen einschließlich HTML unterstützen.
Ich erstelle seit 2000 Websites für Schulen. Vorzugsweise verwende ich dafür nur HTML und CSS. Auch für Schulhomepage.de nutze ich kein CMS, sondern nur HTML, CSS und JavaScript. Ich habe viele HTML-Editoren ausführlich getestet und möchte Ihnen in diesem Artikel meine Erfahrungen und einen Überblick geben.
Ein HTML-Editor ist eine Software, die Sie bei der Entwicklung von Webseiten mit HTML unterstützt. In einen HTML-Editor geben Sie Strukturierungs-Elemente wie beispielsweise <p> für einen Absatz ein. Der HTML-Editor überprüft diese Elemente und macht bei Fehlern Korrekturvorschläge. Viele HTML-Editoren haben eine integrierte Vorschau-Funktion. Hiermit sieht der Entwickler, wie das eingegebene HTML im Browser dargestellt wird. Die meisten HTML-Editoren unterstützen auch Skriptsprachen wie PHP und JavaScript oder Stylesheet-Sprachen wie CSS.
Der beste HTML-Editor ist Visual Studio Code. Er ist kostenlos, funktioniert auf Windows, Linux und macOS und Sie können mit der Erweiterung "Live Preview" eine hervorragende Vorschaufunktion hinzufügen. Ebenso sprechen die größte Beliebtheit unter Entwicklern, die enorm vielen Funktionen, tollen Möglichkeiten zur Anpassung sowie die Versionskontrolle mit Git/Github für den Editor. Eine Einarbeitung in Visual Studio Code lohnt sich langfristig, da er der aktuelle "Industriestandard" ist. Er ist damit das beste Beispiel für einen guten HTML-Editor.
Microsoft entwickelt Atom zwar nicht mehr weiter, dennoch eignet sich Atom exzellent für nahtlose Zusammenarbeit im Team. Er bleibt daher für Puristen bei der Teamarbeit eine gute Wahl.
Mit Brackets ist eine professionelle Webentwicklung für Einsteiger sehr gut möglich. Jedoch gibt es keinen professionellen Support und Brackets wird nur noch gelegentlich als Open-Source-Projekt weiterentwickelt.
Dreamweaver ist erste Wahl, wenn Sie professionellen Support wünschen. Dafür müssen Sie monatlich jedoch über 23 Euro bezahlen. Dreamweaver ist ein hervorragendes Web-Entwicklertool, aber sehr teuer und hat oft Probleme mit der Geschwindigkeit. Eine exzellente Alternative zu Dreamweaver mit Profi-Support ist der CoffeeCup HTML Editor. Die Funktionen sind ähnlich umfangreich und hervorragend. Sie mieten nicht monatlich alle Funktionen, sondern zahlen einmalig für die Funktionen, die Sie wirklich benötigen.
Wenn Sie Code am liebsten gar nicht schreiben, sondern nur im Vorschaumodus designen möchten, ist RocketCake der HTML-Editor Ihrer Wahl. Für Anfänger und diejenigen, die sich auf das visuelle Design konzentrieren möchten, bieten WYSIWYG-Editoren eine hervorragende Möglichkeit, Webseiten visuell zu gestalten, ohne manuell HTML-Code eingeben zu müssen.
Die besten Quellcode-HTML-Editoren sind Visual Studio Code (kostenlos, ohne Nutzung der Vorschaufunktion), der Klassiker Notepad++ (kostenlos) und Sublime Text. Diese Editoren sind bei Webentwicklern wegen ihrer Flexibilität und ihrer leistungsstarken Funktionen besonders beliebt. Sie stellen eine hervorragende Hilfe für diejenigen dar, die keine Vorschau benötigen und viele kleine Helfer beim Schreiben von Code schätzen.
Ein Code-Editor wie Visual Studio Code unterstützt eine Vielzahl von Programmiersprachen, einschließlich HTML. Er ist wegen seiner spezifischen, auf die Bedürfnisse von Entwicklern zugeschnittenen Funktionen sehr beliebt. Sowohl Notepad++ als auch Sublime Text sind großartig, wenn Sie eine aufgeräumte und einfache Benutzeroberfläche mögen.
Es gibt viele tolle Online HTML-Editoren. Mit allen können Sie kostenlos und sehr einfach Webseiten mit HTML, CSS, JavaScript und einer Live-Vorschau in einem Browserfenster erstellen. Die Funktionen eines Online HTML-Editors sind jedoch im Vergleich zu einem HTML-Editor als Software deutlich geringer. Außerdem benötigen Sie immer einen Internetzugang. Daher eignen sich Online-Tools besser für einzelne Webseiten und Code-Schnippsel als für die Entwicklung einer kompletten Website.
Der beste kostenlose Online-HTML-Editor ist JSFiddle. Er bietet großartige Unterstützung bei HTML, CSS und JavaScript. Besondere Highlights sind außerdem:
Fast genauso gut ist Liveweave, das als Highlight einen gratis Editor für Vektorgrafiken und CSS-Styles umfasst.
Der beste Online HTML-Editor für Profis ist Codepen. Das Online-Tool ist sehr beliebt und bietet in der Basisversion kostenlose Webseitenerstellung mit HTML, CSS und JavaScript. In der kostenpflichtigen Pro-Version ist Ihr Code nur nach einem Login sichtbar und Sie können Bilder, CSS, JavaScript, PDF-Dateien usw. hochladen und einbinden. Ebenso ist eine Live-Zusammenarbeit an Code und Projekten einfach möglich.
Alle hier vorgestellten HTML-Editoren bis auf CotEditor können Sie mit Windows verwenden. Für die Online-HTML-Editoren benötigen Sie zusätzlich nur einen Browser. Dies sind die besten HTML-Editoren für Windows.
Die besten HTML-Editoren für macOS sind Visual Studio Code, der CotEditor ohne Vorschaufunktion sowie Brackets und RocketCake für visuelle Webentwicklung.
Wenn Sie einen HTML-Editor mit der Anzeigesprache Deutsch für alle Befehle, die Hilfe usw. verwenden möchten, ist dies mit diesen HTML-Editoren als Software möglich: Notepad++, NoteTab, PSPad, Phase 5, Visual Studio Code, Brackets, Dreamweaver, CoffeeCup, BlueGriffon, RocketCake, und CKEditor.
Lediglich Sublime Text und Atom bieten nur Englisch als Sprache.
Bei den Online HTML-Editoren ist es genau anders herum: Lediglich HTML-Editor Online können Sie auch auf deutsch nutzen, alle anderen nur auf englisch.
Die Entwicklerplattform Stackoverflow.com hat 2023 über 90.000 Webentwickler nach den am meisten eingesetzten Entwicklertools (Integrated Development Environment, IDE) befragt. Dies sind die beliebtesten Tools zur Webentwicklung 2022:
Die aus meiner Sicht wichtigsten HTML-Editoren sind:
HTML-Editoren lassen sich in verschiedene Kategorien unterteilen:
Ein moderner HTML5-Editor unterstützt Sie bei der Entwicklung von Webseiten mit HTML, CSS, JavaScript und weiteren Skriptsprachen.
Moderne Web-Editoren bieten eine Vielzahl von Funktionen, die die Entwicklung von modernen Webseiten deutlich erleichtern und beschleunigen:
HTML-Editor |
Notepad++ | Sublime Text | Phase 5 | Visual Studio |
Brackets | Dream |
CoffeeCup | Rocket Cake | Blue |
CKEditor | JSFiddle | Codepen |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Editor-Typ | Quellcode-Editor | WYSIWYG-HTML-Editor mit Vorschau | Online-HTML-Editor | |||||||||
Betriebssystem | Windows | Windows, macOS, Linux | Windows | Windows, macOS, Linux | Windows, macOS, Linux | Windows, macOS | Windows | Windows, macOS, Linux | Windows, macOS | nur Webanwendung | nur online | nur online |
Programmiersprachen + Markup |
HTML, PHP, CSS, JavaScript und viele mehr | HTML, PHP, CSS, JavaScript | HTML, PHP, CSS, JavaScript und viele mehr | HTML, PHP, CSS, JavaScript und viele mehr | HTML, PHP, CSS, JavaScript und viele mehr | HTML, PHP, CSS, XHTML, JavaScript | HTML, CSS, JavaScript, Markdown | HTML, CSS, JavaScript | HTML, CSS, JavaScript | HTML, CSS, JavaScript | HTML, CSS, JavaScript | HTML, CSS, JavaScript |
Anzeigesprache | Deutsch, Englisch | nur Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | Deutsch, Englisch | nur Englisch | nur Englisch |
Versionskontrolle | nein | nein | nein | ja, mit Github | nein | nein | nein | nein | nein | nein | nein | nein |
Syntax-Highlighting | ja | ja | ja | ja | ja | ja | ja | ja | ja | ja | ja | ja |
Code-Vervollständigen | auto | auto | auto | auto | auto | auto | auto | auto | auto | auto | auto | auto |
Suchen und Ersetzen | komplex | komplex | komplex | komplex | komplex | komplex | komplex | komplex | komplex | grundlegend | grundlegend | grundlegend |
Site-Verwaltung | ja | ja | ja | ja | ja | ja | ja | ja | ja | nein | nein | ja (nur Pro) |
Plugins / Themes | sehr viele | zahlreich | wenige | sehr viele | sehr viele | sehr viele | sehr viele | nein | wenige | viele | nein | nein |
Responsive Webdesign | mit Plugin | viele Tools und Vorlagen | möglich | sehr viele Plugins | sehr viele Plugins | Bootstrap, viele Plugins | ab 29 USD | ja | ab 75€ | ja | ja | ja |
WYSIWYG-Vorschau | nein | nein | nein | ja mit Chrome | ja mit Chrome | ja mit geteiltem Bildschirm | ja mit Split-Screen | ja, bevorzugt | ja | ja, bevorzugt | ja | ja |
Preis | kostenlos | kostenlos | kostenlos testen, 89$ | kostenlos | kostenlos | teuer: min. 23€/Monat | kostenlos, Premium: 29$ | kostenlos, Premium: 39€ | kostenlos | kostenlos bis 5 Personen | kostenlos, "Supporter": 8€ | kostenlos, Pro: ab 7€ |
Vorteile | Klassiker, extrem schnell, sehr viele Funktionen, Notepad++ Portable | gleichzeitiges Bearbeiten mehrerer Codezeilen, viele Tutorials | mehrere Dokumente gleichzeitig editieren, viele Funktionen | sehr viele Programmiersprachen, sehr große Fangemeinde, extrem viele Funktionen | extrem viele Funktionen, große Community, Live-Vorschau mit Chrome | Bootstrap-Vorlagen, exzellenter Code, mit Vorschau, professioneller Support | Echtzeit-Vorschau, FTP integriert, enorm viele Erweiterungen, moderate Preise | Code-Bearbeitung unnötig, da visuelles Design ausreicht, Live-Vorschau (WYSIWYG) | FTP integriert, Rechtschreibprüfung, EPUB-Unterstützung | mit Vorschau, Office-Dokumente, Teamarbeit | keine Installation nötig, Live-Vorschau, Live-Zusammenarbeit, Account, Speichern-Versionen | keine Installation nötig, Live-Vorschau, große Community |
Nachteile | keine Live-Vorschau mit WYSIWYG | kein WYSIWYG mit Browservorschau, nur für Windows | keine WYSIWYG-Browservorschau, Design veraltet | Live-Vorschau nur mit Chrome | Weiterentwicklung nur gelegentlich | sehr teuer, langsam, wenn viele Dateien gleichzeitig geöffnet sind | viele Profi-Funktionen kostenpflichtig | Fokus auf visuelle Bearbeitung, daher nur einfache Code-Funktionen | Live-Vorschau im geteilten Fenster, Design veraltet | nur mit Webanwendung (CMS), Installation anspruchsvoll | keine Siteverwaltung, | Siteverwaltung und Datei-Upload nur Pro |
Fazit | bester Quelltexteditor für Webseiten + Programmieren, ohne Vorschau | exzellenter Quellcode-Editor für nur 80USD, ohne Vorschau | toller kostenloser Quelltext-Editor, ohne Vorschau | beliebtester + bester HTML-Editor für Webseiten und Programmieren | toller kostenloser Editor mit Live-Vorschau, für Einsteiger | exzellenter Web-Editor mit Live-Vorschau, wenn Geld keine Rolle spielt | exzellenter Editor mit Live-Vorschau, günstige Alternative zu Dreamweaver | vorwiegend visuelles Designen, selten Code-Bearbeitung | toller Editor mit Vorschau in kostenpflichtiger Version | exzellenter Editor für CMS | bester kostenloser Online-HTML-Editor | Toll für Code-Schnipsel und -Teilen, einfache Profi-Webentwicklung online |
Die meisten Entwicklungsumgebungen für Webseiten werden als Software auf einem Computer mit Windows, macOS oder Linux installiert. Die Vorteile einer Software sind die Unabhängigkeit von Browser und Internetzugang. Eine Software kann spezielle Funktionen hervorragend integrieren und läuft als Programm stabiler und schneller als ein Browser.
Web-Editoren bieten klassisch die Bearbeitung von Quelltext ohne Echtzeitvorschau. Sie zeigen nur den Quellcode einer Webseite an. Dabei bieten sie auf vielfache Weise Hilfen bei der Entwicklung in HTML, PHP, JavaScript und vielen weiteren Programmiersprachen.
Ein Vorteil der Quellcode-Editoren ist die hohe Geschwindigkeit, da die Software nicht aufwendig eine Echtzeitvorschau des Codes berechnen muss. Ferner können diese Tools meist minimalistisch eingerichtet werden. Wer also eine übersichtliche und minimale Benutzeroberfläche mag, ist hier genau richtig.
Nachteil der Quellcode-Editoren ist, dass eine Echtzeitvorschau fehlt. Der Entwickler muss sich also immer vorstellen, wie der Code im Browser aussieht. Wenn Sie daher immer live Ihren Code als Vorschau sehen möchten, wählen Sie am besten ein WYSIWYG-HTML-Editor mit Echtzeitvorschau.
Notepad++ (kurz Note++) ist der Klassiker und der zweitbeliebteste Quellcodeeditor. Er ist kostenlos, sehr bedienerfreundlich und schnell und glänzt mit umfangreichen Funktionen. Profis nutzen die exzellente Entwicklungsumgebung Notepad++ sehr gerne zur Entwicklung von Webanwendungen, sofern sie keine Echtzeitvorschau benötigen. Aber auch Privatanwender setzen Notepad++ gerne ein, da er leicht zu erlernen und "free" ist. Notepad++ gehört zu den 5 beliebtesten Entwickler-Tools.
Dateien Vergleichen mit der Erweiterung "Compare"
Sehr hilfreich ist die Erweiterung "Compare". Mit dieser Funktion zeigt Ihnen Notepad++ farblich markiert die Unterschiede im Quellcode von zwei oder mehr Dateien.
Vorteile:
Nachteile:
Preis, Website und Download
Notepad++ Portable: ohne Installation
Mit Notepad++ Portable (Englisch: "tragbar", "transportierbar") haben Programmierer die Möglichkeit, den Texteditor ohne Installation auf einem Computer zu nutzen. Notepad++ Portable wird zuerst auf einem USB-Stick eingerichtet. Danach kann Notepad++ Portable an jedem beliebigen Windows-Computer vom USB-Stick genutzt werden.
Wer mit Notepad++ nicht zurechtkommt, kann den mehrfach ausgezeichneten Text-Editor NoteTab Light für Windows oder Linux ausprobieren. NoteTab ist in der Version Light Freeware und kostet in der Pro-Version 39,95 US-Dollar. Der Texteditor bietet ähnliche Funktionen wie Notepad++. Dabei ist NoteTab besonders schnell und bietet enorm viele Komfortfunktionen.
Eine weitere hervorragende Notepad++-Alternative ist PSPad. Der Freeware-Editor PSPad ist ein unicode-fähiger Editor für Microsoft Windows, der besonders Programmierer und Webentwickler unterstützt. Das vielfach ausgezeichnete PSPad bietet insbesondere Syntaxhighlighting, Unterstützung für viele Programmiersprachen und eine HTML-Vorschau.
Notepad++ funktioniert leider nicht auf einem Apple Macintosh-Computer. Jedoch gibt es mit dem CotEditor einen hervorragenden Texteditor als Alternative zu Notepad++ für den Mac:
Vorteile:
Nachteile:
Preis, Website und Download
Sublime Text eignet sich hervorragend zum Editieren von HTML5, CSS, JavaScript, PHP und mehr. Funktionen wie Multiple Cursors, Multiple Select und Copy bzw. Paste sind enorm hilfreich. Sie machen die Arbeit im HTML5-Editor Sublime Text sehr effizient und schnell.
Sublime Text Vorteile:
Sublime Text Nachteile:
Preis, Website und Download
Das von Ulli Meybohm 1998 ins Leben gerufene Phase 5 ist inzwischen ein Klassiker. Das von Meybohm entwickelte kostenlose Phase 5 ist sehr übersichtlich gestaltet.
Mit Phase 5 sehen Sie keine Vorschau des Codes. Deshalb können Sie das Ergebnis nur mit Hilfe eines Browsers ansehen. Phase 5 eignet sich deshalb vor allem für Entwickler, die schnell schreiben können und keine Vorschau benötigen. Im Vergleich zu Notepad++ bietet Phase 5 weniger Funktionen. Dennoch können Sie mit CSS und HTML5 sehr schnell und effektiv arbeiten. So können Sie beispielsweise einen HTML Link sehr leicht und schnell einfügen.
Vorteile:
Nachteile:
Preis, Website und Download
Weitere Informationen zu Phase 5 bietet der Artikel "Phase 5 - exzellenter kostenloser Quellcode-Editor"
Vim ist ein hochgradig konfigurierbarer freier Texteditor, mit dem sich jede Art von Text sehr effizient erstellen und ändern lässt. Er ist als "vi" in den meisten UNIX-Systemen und in Apple OS X enthalten. Vim steht für „Vi Improved“, was bedeutet, dass es sich um eine überarbeitete grafische Version des Urgesteins "Vi-Texteditor" handelt.
Auch auf Windows wird der kostenlose Texteditor gerne von Puristen genutzt. Vim gehört zu den 5 beliebtesten Entwickler-Tools und lässt sich größtenteils komplett mit der Tastatur navigieren. Vim ist äußerst stabil und wird regelmäßig weiterentwickelt.
Vorteile:
Nachteile:
Preis, Website und Download
WYSIWYG HTML-Editoren mit Vorschau haben einen großen Vorteil: Sie müssen sich nicht vorstellen, wie Ihr Code live aussehen wird. Sie sehen in der Live-Vorschau, ob der Code Ihrer Vorstellung entspricht.
Nachteil ist, dass die Vorschaufunktion den HTML-Editor verlangsamt und Sie durch den geteilten Bildschirm weniger Code sehen.
Im Folgenden lernen Sie die besten WYSIWYG Web-Editoren mit Vorschau mit ihren Vor- und Nachteilen kennen.
Visual Studio Code (kurz VS Code) ist ein Open-Source-Quelltext-Editor von Microsoft. Sie dürfen die Software für private und kommerzielle Projekte kostenlos nutzen. Sie können Visual Studio Code mit den Betriebssystemen Windows 10 oder 11, macOS und Linux verwenden.
Visual Studio Code ist ein Quelltext-HTML-Editor ohne integrierte Vorschaufunktion (WYSIWYG). Mit der kostenlosen Erweiterung "Live Preview" verbinden Sie die Entwicklungsumgebung mit dem Chrome-Browser, sodass jede Änderung in Echtzeit angezeigt wird:
VS Code ist ein sehr mächtiger textbasierter Editor und bei Entwicklern der beliebteste Quellcode-Editor. Deshalb gibt es enorm viele Erweiterungen und Visual Studio Code ist sehr zukunftssicher. Es unterstützt neben HTML5, CSS und JavaScript für die Entwicklung von Websites viele weitere Programmiersprachen. Darunter sind beispielsweise PHP, Visual Basic .NET, C, C++, C++/CLI, C++/CX, C#, F#, SQL-Server, TypeScript und Python. Wer sich mit VS Code auskennt, muss bei der Entwicklung mit anderen Sprachen keinen neuen Editor kennenlernen.
Microsoft aktualisiert Visual Studio Code monatlich und bietet gratis umfangreiche Tutorials und Videos an. Mit diesen Hilfen fällt der Einstieg sehr leicht.
Visual Studio Code ist der insgesamt beste HTML-Editor:
Vorteile:
Nachteile:
Preis, Website und Download
Adobe Brackets ist zunächst wie ein Quelltext-HTML-Editor ohne integrierte WYSIWYG-Vorschaufunktion (what you see is what you get). Sie können den kostenlosen Editor mit dem Google Chrome Browser jedoch so verbinden, dass jede Änderung live angezeigt wird. Dies erleichtert die Entwicklung von Webseiten erheblich. Sie sehen somit wie bei einem Editor mit WYSIWYG-Vorschau, was Ihre Code-Änderung macht:
Für Brackets gibt es keinen professionellen Support. Brackets wird nur noch gelegentlich als Open-Source-Projekt weiterentwickelt, da Adobe die Weiterentwicklung 2021 eingestellt hat.
Vorteile:
Nachteile:
Preis, Website und Download
Dreamweaver ist der Klassiker unter den Entwicklungsumgebungen mit Vorschaufunktion. Die Code-Qualität ist hervorragend und es gibt fast nichts, was der Editor nicht kann. Webdesigner und -Entwickler können auf eine Vielzahl an visuellen Layout-Funktionen, Werkzeugen und Effekten zurückgreifen. Dreamweaver ist ein sehr ausgereiftes Multimedia-Werkzeug, mit dem Profis arbeiten. Dreamweaver folgt dem WYSIWYG-Prinzip, das es Benutzern ermöglicht, visuell zu gestalten, während es erfahrenen Webdesignern auch die Option bietet, direkt im HTML-Code zu arbeiten.
Dreamweaver unterstützt die Webentwicklung mit AJAX, CSS 3 und HTML5. Es bietet eine Fülle an kleinen Helfern, die die Entwicklung vereinfachen.
Sie können Dreamweaver nicht einmalig erwerben, sondern müssen das Programm monatlich mieten. Dies macht den Editor langfristig sehr teuer.
Vorteile:
Nachteile:
Preis, Website und Download
Dreamweaver ist das einzige Web-Entwicklungstool, das Sie nicht kaufen, sondern nur monatlich für über 23 Euro mieten können. Damit sind Kunden gezwungen für neue Versionen und Funktionen zu bezahlen, die sie vielleicht nie benötigen. Ferner wird es bei langjähriger Nutzung extrem teuer - selbst für professionelle Webdesigner.
Völlig unverständlich ist, dass Adobe die monatliche Miete auch für den Education-Bereich aufrechterhält. Schüler, Studenten und Lehrer zahlen im ersten Jahr 19 Euro monatlich für alle Adobe Produkte, ab dem 2. Jahr 29 Euro monatlich. Wer sich in einer Berufsausbildung befindet, wird in den meisten Fällen diese hohen Preise nicht zahlen können.
Daher kann insbesondere für den Education-Bereich vom Kauf eines Adobe-Produktes nur abgeraten werden. Alle anderen in diesem Artikel vorgestellten Firmen bieten ihren HTML-Editor für Schüler, Studenten und Lehrer vergünstigt zum Kauf oder sogar kostenlos an. Bei Adobe hingegen zahlen Sie pro Jahr, was sie bei den anderen Firmen maximal beim Kauf zur Nutzung für beliebig lange Zeit bezahlen.
Auch bei Bestellung mehrerer Lizenzen für Bildungseinrichtungen gibt es zwar einen Rabatt, aber immer nur zum monatlichen Mietpreis.
CoffeeCup HTML Editor ist ein sehr benutzerfreundlicher Editor mit Echtzeitvorschau, der bereits in der kostenlosen Version viele nützliche Funktionen beinhaltet.
Mit CoffeeCup können Sie auf einem Windowscomputer sehr leicht mit HTML, CSS oder Markdown eigene Webseiten erstellen. CoffeeCup eignet sich vor allem für Entwickler, die Webseiten textbasiert erstellen und dabei gerne eine Live-Vorschau benutzen.
Es gibt eine große Anzahl an kostenpflichtigen Erweiterungen, mit denen fast keine Entwicklerwünsche offenbleiben. Allerdings kostet jede professionelle Erweiterung zusätzlich Geld. Daher sollten Sie zunächst testen, welche Funktionen Sie benötigen. Dann überlegen Sie, ob sich der Aufpreis für Sie lohnt.
Insgesamt hat CoffeeCup ähnlich viele hervorragende Funktionen wie Dreamweaver. Der Vorteil gegenüber Dreamweaver ist, dass Sie nicht monatlich alle Funktionen wie bei Dreamweaver mieten. Stattdessen kaufen Sie einmalig die Funktionen, die Sie benötigen. Das ist langfristig deutlich günstiger.
Vorteile:
Nachteile:
Preis, Website und Download
Atom wurde von GitHub, der größten Software- und Webentwicklungs-Community im Internet entwickelt, die ebenso zu Microsoft gehört. Herausragende Funktion von Atom ist die Zusammenarbeit im Team. Sie können gleichzeitig mit mehreren Benutzern an einer Datei oder einem Projekt arbeiten.
Atom verfügt darüber hinaus über eine integrierte Unterstützung für Git/Github. Damit existiert für alle Dateien eine Versionskontrolle. Alte Versionen einer Datei können Sie einfach wiederherstellen.
Microsoft hat sich entschlossen Atom nicht mehr weiterzuentwickeln. Stattdessen liegt der Fokus nun ganz auf Visual Studio Code.
Vorteile:
Nachteile:
Preis, Website und Download
NVU und die Weiterentwicklungen KompoZer sowie BlueGriffon sind ebenfalls exzellente Webeditoren mit dem Vorteil, dass sie auch eine Vorschaufunktion besitzen. So zeigen Sie per Mausklick, ob der Code im Browser so aussieht, wie Sie es sich vorstellen.
Für die Vorschau verwenden BlueGriffon sowie KompoZer die Mozilla-Engine, wodurch Sie alles so wie im Firefox-Browser sehen. Daher eignet sich die Software sowohl für Anfänger als auch für professionelle Entwickler. Denn insbesondere der Quellcode von BlueGriffon ist exzellent.
BlueGriffon Vorteile:
Nachteile:
Preis, Website und Download
Weitere Informationen zu BlueGriffon bietet der Artikel "Bluegriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau | Download und Tutorial"
RocketCake ist ein moderner kostenloser HTML-Editor mit WYSIWYG-Vorschau. Der Fokus liegt auf der visuellen Erstellung von Webseiten. Sie gestalten Webseiten mit der Maus per Drag und Drop. Der Webentwickler benötigt somit keine Programmierkenntnisse. Dabei schreibt der Editor im Hintergrund sehr sauberen HTML5-Code und CSS. Dieser Code lässt sich zwar nicht in einem geteilten Bildschirm gleichzeitig anzeigen, aber in einem neuen Fenster optional leicht bearbeiten.
RocketCake ermöglicht die einfache Erstellung von responsiven Websites für mobile Geräte. Dafür ist u. a. der Breakpoint CSS Editor zuständig. Das CSS legt Auflösungen fest, sodass sich bei unterschiedlichen Bildschirmgrößen das Layout ändert.
Eine Alternative zu RocketCake ist der kostenlose Editor OpenElement, der sehr ähnlich ohne Programmierkenntnisse funktioniert.
Vorteile:
Nachteile:
Preis, Website und Download
CKEditor Version 5 ist ein sehr moderner kostenloser HTML-Editor mit Vorschaufunktion. Allerdings lässt sich die Software nicht einfach auf einem Computer installieren. Sie benötigen eine Web-Anwendung wie ein Content Management System (CMS), in das der CKEditor integriert wird. Fast alle CMS wie WordPress, Typo3 oder Joomla nutzen CKEditor. Damit können Redakteure ohne Programmierkenntnisse sehr einfach Inhalte wie Text und Bilder in der Anwendung bearbeiten.
Vorteile:
Nachteile:
Preis, Website und Download
Es gibt eine Reihe toller kostenloser Online-HTML-Editoren mit WYSIWYG-Vorschau, die sehr benutzerfreundlich sind. Sie können diese Editoren ohne Installation in einem Browser nutzen. Es gibt hierbei zwei Kategorien:
1. Kostenlose Online-HTML-Editoren
Alle Online-HTML-Editoren bieten die Möglichkeit kostenlos und einfach Webseiten mit HTML, CSS und JavaScript zu erstellen. Dabei ist es meistens eine Frage des persönlichen Geschmacks mit welcher Benutzeroberfläche Sie am besten zurechtkommen.
Die kostenlosen Editoren haben jedoch diese Nachteile:
Dies sind die besten kostenlosen Online-HTML-Editoren:
2. Online-HTML-Editoren mit kostenpflichtigen Profifunktionen
Nur wenige Online-HTML-Editoren bieten neben der kostenlosen Erstellung von HTML, CSS und JavaScript auch Profifunktionen wie:
Die besten Online-HTML-Editoren mit Profifunktionen sind:
JSFiddle ist ein sehr populäres und oft verwendetes Online-Tool, um schnell und einfach kleine Codeschnippsel zu erstellen. Mit der Fork-Funktion können Benutzer eigene Versionen erzeugen und den Code weiter entwickeln. Mit der Save-Funktion lassen sich verschiedene Versionen des Codes sichern. Zusätzlich können externe Ressourcen wie JavaScript, Grafiken und CSS-Dateien eingebunden werden. Über die Collaborate-Funktion können Sie einen Link zum Code verschicken, sodass mehrere Benutzer diesen gleichzeitig in einer Live-Zusammenarbeit weiterentwickeln können.
JSFiddle ähnelt im Aussehen, den Funktionen und bei der "Live-Zusammenarbeit" sehr Liveweave. Es gibt jedoch Unterschiede: Nur JSFiddle bietet die Möglichkeit Projekte und verschiedene Versionen in einem Account zu speichern. Liveweave hingegen hat als Alleinstellungsmerkmal die Editoren für Vektorgrafiken und CSS-Styles. Bei der Entscheidung zwischen JSFiddle und Liveweave gewinnt JSFiddle mit den Speichermöglichkeiten in einem Account. Denn die Editoren für Vektorgrafiken und CSS-Styles können Sie auch als eigenständige Tools nutzen und dann den Code in JSFiddle importieren.
JSFiddle ist daher der mit Abstand beste kostenlose Online-HTML-Editor!
Vorteile:
Nachteile:
Preis, Website und Download
Liveweave ist ein hervorragender kostenloser WYSIWYG Online-HTML-Editor. Liveweave zeigt sich in einer sehr schönen und übersichtlichen Benutzeroberfläche. Die einzelnen Entwicklungsbereiche können Sie nach ihren Wünschen anordnen.
Liveweave bietet kostenlose Entwicklung mit HTML, CSS und JavaScript sowie vordefinierten Libraries, welche direkt integriert werden können. Zusätzlich können Sie CSS-Styles mit einem Explorer einfach zusammenklicken, sowie mit einem Editor für Vektorgrafiken leicht erstellen. Mit diesem lassen sich SVG-Grafiken zuerst zeichnen und nach dem Speichern als Code hinzufügen. Herausragendes Highlight ist eine kostenlose Live-Zusammenarbeit im Team. Der Link zum aktuellen Code kann einfach verschickt werden. Anschließend können beliebig viele Benutzer mitarbeiten und dabei chatten oder miteinander sprechen.
Vorteile:
Nachteile:
Preis, Website und Download
html-online.com ist ein kostenloser WYSIWYG Online-HTML-Editor. Hiermit können Sie HTML kostenlos von jedem beliebigen Computer oder Tablet editieren und in einer Live-Vorschau prüfen. html-online.com ist besonders hilfreich, wenn Sie gerade keinen Zugriff auf den installierten Editor Ihrer Wahl haben. Online können Sie schnell HTML erstellen oder bearbeiten. Auf diese Weise beheben Sie beispielsweise kleine Fehler oder probieren etwas Neues aus.
Vorteile:
Nachteile:
Preis, Website und Download
HTMLEditor.tools ist ein übersichtlicher WYSIWYG-HTML-Editor in Internet. Der Browser-Inhalt wird in zwei Fenster aufgeteilt: eins für den Code und eins für die Echtzeitvorschau.
Dieser Editor verfügt über ein umfangreiches Set von Werkzeugen, mit denen Sie dynamische und responsive HTML-Seiten erstellen können.
Ein tolles Feature ist die Verwendung von Farbcodes zur Unterscheidung zwischen dem HTML-Code und dem Inhalt. Diese Funktion erleichtert Ihnen die Änderung des Codes, ohne dass Sie befürchten müssen, das falsche Tag zu ändern.
Vorteile:
Nachteile:
Preis, Website und Download
Einen weiteren tollen Online-Editor mit WYSIWYG gibt es bei html5-editor.net. Dieser Editor bietet Ihnen eine Vorschau in zwei Fenstern, sodass Sie direkt sehen, was Ihre Code-Änderung bewirkt.
Er unterstützt viele Medieninhalte wie Bilder, Audio-Dateien und Videos. Außerdem verfügt er über ein Live-Editing-Tool, mit dem Sie den HTML-Code in Echtzeit sehen können, während er generiert wird. Nachdem Sie Ihre Inhalte erstellt haben, können Sie die HTML-Datei kopieren und sie auf Ihrer Website verwenden. Das Tool ähnelt sehr dem Editor von htmleditor.tools.
Vorteile:
Nachteile:
Preis, Website und Download
Bei htmleditor.online finden Sie einen besonders benutzerfreundlichen Online-WYSIWYG-Editor für HTML. Das Tool ist kostenlos und ermöglicht es den Nutzern, beeindruckende HTML-Seiten ohne Programmierung zu erstellen.
Sie können zwischen dem Editor-Tool und dem Quellcode-Tool hin- und herschalten, indem Sie auf die Schaltfläche "Quellcode" im Editor klicken.
Der Editor verfügt über die meisten Funktionen des populären WordPress-Editors, einschließlich Rechtschreibprüfung und zahlreicher Textstile. Sie können Bilder in Ihre Webseiten einbinden, aber leider keine Audio- oder Videoinhalte. Abgesehen von dieser eingeschränkten Medienunterstützung ist es insgesamt ein hervorragendes Werkzeug für die Bearbeitung von HTML5-Seiten.
Vorteile:
Nachteile:
Preis, Website und Download
Codepen.io ist eine tolle Plattform für Webentwickler, die Webprojekte in HTML, CSS und JavaScript entwickeln.
Codepen eignet sich besonders gut zum Entwickeln und Teilen von Code für Webprojekte. Sie können komplette Websites entwickeln, aber auch einzelne Webseiten oder Teile wie beispielsweise eine responsive Tabelle. Das Browser-Fenster ist dabei geteilt: Die obere Hälfte bietet zu je einem Drittel Platz für HTML, CSS und JavaScript. Die untere Hälfte zeigt in Echtzeit eine Vorschau des Codes.
Es können Code-Schnipsel für einzelnen Seiten oder Funktionen gesammelt und geteilt werden. In der kostenlosen Version ist der Code immer öffentlich, in der Pro-Version kann dieser verborgen werden.
Vorteile:
Nachteile:
Preis, Website und Download
Ein weiterer großartiger Online-HTML-Editor mit Profifunktionen ist in der "Supporter"-Version für 8 Euro monatlich JSFiddle.
Weiterführende Artikel
Weitere Tipps zu HTML:
Was ist der beste HTML-Editor?
Der beste HTML-Editor ist Visual Studio Code:
Was ist der beste HTML-Editor Online?
Der beste kostenlose HTML-Editor Online ist JSFiddle. Er bietet großartige Unterstützung bei HTML, CSS und JavaScript. Ferner bietet er eine sehr übersichtliche Bildschirmteilung in Code-Ansicht und Live-Vorschau mit vielen Bearbeitungsfunktionen. Besondere Highlights sind: Live-Zusammenarbeit im Team sowie Speicherung von Projekten in verschiedenen Versionen mit einem Account. Super!
Fast genauso gut ist Liveweave, das als Highlight einen kostenlosen Editor für Vektorgrafiken und CSS-Styles umfasst.
Der beste kostenpflichtige HTML-Editor Online ist Codepen. Er bietet zusätzlich einen Upload für Bilder und andere Dateien sowie die Möglichkeit, dass Code nur mit einem Login sichtbar ist.
Was ist ein WYSIWYG-HTML-Editor?
WYSIWYG steht für „What You See Is What You Get“ (Englisch für „Was du siehst, ist [das], was du bekommst."") Ein WYSIWYG-HTML-Editor zeigt dementsprechend den Code als Vorschau so an, wie ein Benutzer ihn in einem Browser sieht. Die Anzeige der Inhalte erfolgt dabei in Echtzeit. Die Live-Vorschau erleichtert die Entwicklung enorm, da der Entwickler sofort sieht, ob sein geschriebener Code den gewünschten Inhalt anzeigt.
Was ist der beste WYSIWYG-Editor?
Der beste WYSIWYG-HTML-Editor mit Vorschaufunktion ist Visual Studio Code:
Womit kann ich HTML schreiben?
HTML schreiben Sie ganz einfach kostenlos mit diesen Programmen:
Was ist der beste HTML-Editor mit Vorschau?
Der beste HTML-Editor mit Vorschau ist Visual Studio Code: